<template>
  <div>
    供应商类别<el-select style="width: 140px;margin-left: 10px;margin-right: 10px;" size="small"
      placeholder="类别"></el-select>
    供应商名称<el-input style="width: 140px;margin-left: 10px; margin-right: 10px;" size="small"
      placeholder="供应商名称"></el-input>
    <el-button size="small" type="primary">查询</el-button>
    <el-table :data="pageInfo.list" style="width: 100%;margin-top: 10px;" height="400"
      @selection-change="handleSelection">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="providerTypeName" label="类别" width="120">
      </el-table-column>
      <el-table-column prop="providerCode" label="编号" width="120">
      </el-table-column>
      <el-table-column prop="providerName" label="名称" width="120">
      </el-table-column>
      <el-table-column label="联系人" width="400">
        <template slot-scope="scope">
          <table id="contact-table" style="width: 100%; text-align:center;">
            <tr>
              <th>名称</th>
              <th>手机号</th>
              <th>邮箱</th>
              <th>联系地址</th>
            </tr>
            <tr v-for="(contact, index) in allContact" :key="index">
              <td v-if="contact.providerId == scope.row.providerId">
                {{ contact.contactName }}
              </td>
              <td v-if="contact.providerId == scope.row.providerId">
                {{ contact.mobile }}
              </td>
              <td v-if="contact.providerId == scope.row.providerId">
                {{ contact.email }}
              </td>
              <td v-if="contact.providerId == scope.row.providerId">
                {{ contact.contactAddress }}
              </td>
            </tr>
          </table>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" width="120">
      </el-table-column>
    </el-table>
    <el-pagination style="position: relative;left: 30px;" @current-change="handleCurrentChange"
      :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  props: ['dialogShow'],
  watch: {
    dialogShow(newVal, oldVal) {
      if (oldVal == false) {
        this.getAllProvider(1, 105)
      }
    }
  },
  data() {
    return {
      // providerList: [],
      allContact: [],
      pageInfo: {},
      selectionList: []
    }
  },
  methods: {
    handleSelection(val) {
      this.selectionList = val
      console.log(this.selectionList)
    },
    handleCurrentChange(val) {
      this.getAllProvider(val, 10)
    },
    //获取所有供应商
    getAllProvider(pageNum, pageSize) {
      this.axios.get('/info/provider/getProviderPage', {
        params: {
          pageNum, pageSize
        }
      }).then(rs => {
        if (rs.data.pageInfo != null) {
          this.pageInfo = rs.data.pageInfo
          this.getAllContact()
        }
      })
    },
    //获取联系人
    getAllContact() {
      this.axios.get('/info/contact/getAllContact'
      ).then(rs => {
        this.allContact = rs.data.contactList
      })
    },
  },
  created() {
    this.getAllProvider(1, 10)
  }
}
</script>

<style scoped>
/* 合计行整体样式修改开始 */
.el-table /deep/ .el-table__footer-wrapper tbody td {
  background-color: #fff1d4;
}

.el-table /deep/ .el-table__body tr:hover>td {
  background-color: #fff1d4;
}

#contact-table {
  border-collapse: collapse;
  text-align: center;
}

#contact-table th,
#contact-table td {
  border: 1px solid gray;
  padding: 0px;
}
</style>